<template>
  <div class="app-container">
    <div>
      <el-row>
        <el-col :span="12">
          <a @click="goBack"><i class="el-icon-back back-icon" /></a>
          <el-divider direction="vertical"></el-divider>
          <span class="pr16" style="font-size: 1.17em; font-weight: bold">{{ serviceInfo.name }}</span>
          <a v-clipboard:copy="serviceInfo.name" v-clipboard:success="clipboardSuccess"><i class="el-icon-document-copy" /></a>
        </el-col>
      </el-row>
      <Row type="flex" align="middle" style="padding-top: 8px">
        <span style="font-size: 12px">
          监控地址：
          <a target="_blank" href="/" class="pr8" style="color: #409eff">Grafana</a>
          <span class="notice-info pr8">
            <i class="el-icon-info" style="color: #409eff"></i>
            <span class="notice-content">
              服务类型：
              <span>{{ serviceInfo.serviceType }}</span>
            </span>
          </span>
          <span class="notice-info pr8">
            <i class="el-icon-info" style="color: #409eff"></i>
            <span class="notice-content">
              环境：
              <span>{{ serviceInfo.env }}</span>
            </span>
          </span>
          <span class="notice-info pr8">
            <i class="el-icon-info" style="color: #409eff"></i>
            <span class="notice-content">
              区域：
              <span>{{ serviceInfo.zone }}</span>
            </span>
          </span>
        </span>
      </Row>
    </div>
    <div class="pt8">
      <Tabs v-model="activeName">
        <TabPane label="服务详情" name="detail">
          <service-detail :service-info="serviceInfo"></service-detail>
        </TabPane>
        <TabPane label="服务器" name="server">
          <service-asset :service-info="serviceInfo"></service-asset>
        </TabPane>
        <!-- <TabPane label="指标&监控" name="monitor"> </TabPane>
        <TabPane label="工单" name="ticket"> </TabPane>
        <TabPane label="变更记录" name="changelog"> </TabPane> -->
      </Tabs>
    </div>
  </div>
</template>

<script>
import { getCmdbService } from '@/api/cmdb/service'
import { snakeCaseObject } from '@/libs/object'
import ServiceDetail from '@/views/cmdb/detail/serviceDetail/index'
import clipboard from '@/directive/clipboard/index.js'
import Bus from '@/store/bus.js'
import ServiceAsset from '@/views/cmdb/detail/serviceAsset'
export default {
  name: 'DetailIndex',
  directives: {
    clipboard
  },
  components: { ServiceDetail, ServiceAsset },
  data() {
    return {
      activeName: 'detail',
      instanceColumns: [],
      databaseColumns: [],
      instanceDatas: [],
      databaseDatas: [],
      expandedDatabaseName: '',
      serviceInfo: {}
    }
  },
  computed: {
    serviceId() {
      return this.$route.params.serviceId
    }
  },
  mounted() {
    this.getCmdbService()
    Bus.$on('getServiceInfoRefresh', (e) => {
      this.getCmdbService()
    })
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    clipboardSuccess() {
      this.$message({ message: '复制 Service名称 成功', type: 'success', duration: 1500 })
    },
    async getCmdbService() {
      const { data } = await getCmdbService(snakeCaseObject(this.serviceId))
      this.serviceInfo = data
    }
  }
}
</script>

<style scoped>
.back-icon {
  font-weight: 900;
  font-size: 20px;
  vertical-align: middle;
}

.notice-info {
  background-color: #f0faff;
  padding: 5px 8px;
  border-radius: 4px;
}

.notice-info .notice-content {
  padding: 0 6px;
  color: #515a6e;
}

.ivu-tabs >>> .ivu-tabs-nav-right {
  margin-top: 4px;
}
</style>

